<template>
  <div class="down-sumBox">
    <div v-for="(v, i) in arr" :class="`item${i + 1}`"></div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue';


const arr = [
  { name: '张三' },
  { name: '李四' },
  { name: '王五' },
  { name: '赵六' },
  { name: '坤七' },
  { name: '陈八' },
  { name: '刘九' },
  { name: '吴九' },
  { name: '雷一' },
]

</script>

<style lang="scss">
.down-sumBox {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* 创建 3 列 */
  grid-template-rows: 1fr 1fr 1fr;
  /* 创建 3 行 */
  gap: 3px;
  transition: all .3s;
}


// 定义每个项目的颜色
@for $i from 1 through 9 {
  .item#{$i} {
    background-color: hsl(360 / 9 * ($i - 1), 80%, 65%);

    &:hover {
      .down-sumBox:has(&:hover) {
        // 定义一个包含不同尺寸的列表
        $r: floor(($i - 1) / 3 + 1);
        $c: (
          $i - 1) % 3 + 1;
        $arr: 1fr 1fr 1fr;
        $sizesrows: set-nth($arr, $r , 2fr
        );
      $sizesColumns: set-nth($arr, $c , 2fr);

      grid-template-columns: $sizesColumns;
      grid-template-rows: $sizesrows;
    }
  }
}

}
</style>